<template>
  <div class="AAK_module">
    <module-header
      :title="title"
      :meter="meter"
      :params="{
        module: 'AAG',
        status,
        Id: '',
        Bore: '',
        Cutting: ''
      }"
    />
    <section class="settings">
      <task-tab :settings="module_settings"></task-tab>
    </section>
    <section class="chart">
      <div class="item">
        <AAKChart ref="chart" :data="mockChartData" @onTableOpenChange="onTableOpenChange" />
      </div>
      <div v-if="isTableShow" ref="DataTable" class="item sandbox">
        <ul>
          <li>
            <span>时间</span>
            <span>压力</span>
            <span>修正压力</span>
          </li>
          <li v-for="(date, index) in mockChartData.xAxis" :key="date">
            <span>{{ mockChartData.xAxis[mockChartData.xAxis.length - 1 - index] }}</span>
            <span>{{ mockChartData.pressure[mockChartData.xAxis.length - 1 - index] }}</span>
            <span>{{
              mockChartData.corrctedPressure[mockChartData.xAxis.length - 1 - index]
            }}</span>
          </li>
        </ul>
      </div>
    </section>
    <section class="table">
      <record-table
        title="气密性记录表"
        procedure="AAK"
        :meter="meter"
        :limits="RecordTableLimit"
        :params="{
          title,
          Cutting: ''
        }"
        :tableColumnDict="tableColumnDict"
        :tableData="tableData"
      />
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Ref, Watch } from 'vue-property-decorator'
import { tableColumnDict, TableColumnType, module_settings, mockChartData } from './params'
import ModuleHeader from '@/components/basic/ModuleHeader.vue'
import RecordTable from '@/components/basic/RecordTable.vue'
import TaskTab from '@/views/dashboard/compoents/TaskTab.vue'
import { Dictionary } from '@/interface/Basic'
import AAKChart from './airTightnessChart.vue'
import { formatTime } from '@/utils/specificFunc'
import { Route } from 'vue-router'
import * as echarts from 'echarts'
@Component({
  components: {
    ModuleHeader,
    RecordTable,
    TaskTab,
    AAKChart
  }
})
class NoneStandard extends Vue {
  @Ref() chart!: { chart: echarts.ECharts | null }
  @Ref() DataTable!: HTMLElement
  @Prop() status!: string
  @Prop({ default: '' }) meter!: string
  @Prop({ required: true }) title!: string
  tableColumnDict = tableColumnDict
  module_settings = module_settings
  mockChartData = mockChartData
  activeName: string = 'first'
  radio: string = 'KPa'
  tableData: TableColumnType[] = []
  init_button_limit: Dictionary<boolean> = {
    // 保存
    AAG_0: true,
    // 删除
    AAG_1: true,
    // 新建
    AAG_2: true,
    // 读取三坐标
    AAG_3: true,
    // 手动选择三坐标
    AAG_4: true
  }
  isTableShow: boolean = false
  get RecordTableLimit(): Dictionary<boolean> {
    const { AAG_0, AAG_1, AAG_2 } = this.init_button_limit
    return {
      Store: AAG_0,
      Create: AAG_2,
      Delete: AAG_1
    }
  }
  // 模拟获取到新数据
  pageName: string = ''
  timer: NodeJS.Timer | null = null
  @Watch('$route', { deep: true, immediate: true })
  route_handler(newVal: Route) {
    const newRouteName = newVal.query.procname as string
    console.log(this.timer, newRouteName === this.pageName && !this.timer)
    if (this.pageName && this.timer && newRouteName !== this.pageName) {
      clearInterval(this.timer)
    } else if (newRouteName === this.pageName) {
      this.timer = setInterval(() => {
        this.mock_AddNewData()
      }, 3000)
    }
  }
  mounted() {
    this.pageName = this.$route.query.procname as string
    this.timer = setInterval(() => {
      this.mock_AddNewData()
    }, 3000)
  }
  mock_AddNewData() {
    const { meter, xAxis, pressure, corrctedPressure } = this.mockChartData
    const idx = xAxis.length - 1
    const newDate = formatTime(
      new Date(xAxis[idx]).getTime() + 3000,
      'YYYY-MM-DD-hh-mm-ss'
    ).replaceAll('-', '/')
    const newPressure =
      pressure[idx] -
      Math.pow(-1, Number(Math.round(Math.random() * 2).toFixed(0))) *
        Number(Math.round(Math.random() * 100))
    const newCorrected =
      corrctedPressure[idx] -
      Math.pow(-1, Number(Math.round(Math.random() * 2).toFixed(0))) *
        Number(Math.round(Math.random() * 100))
    xAxis.push(newDate)
    pressure.push(newPressure)
    corrctedPressure.push(newCorrected)
    this.mockChartData = {
      meter,
      xAxis,
      pressure,
      corrctedPressure
    }
  }
  onTableOpenChange() {
    this.isTableShow = !this.isTableShow
    this.$nextTick(() => {
      if (this.chart.chart) this.chart.chart.resize()
    })
    // if (!this.isTableShow) {
    //   this.isTableShow = true
    //   this.$nextTick(() => {
    //     this.DataTable.animate([
    //       { width: 0 }, { width: '300px' }
    //     ], { duration: 800, easing: 'ease', fill: 'forwards' })
    //   })
    // } else {
    //   this.isTableShow = false
    // }
  }
}
export default NoneStandard
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.AAK_module {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  #flex(column, flex-start, flex-start);
  header {
    width: 100%;
    margin-bottom: 10px;
    #flex(row, center, space-between);
    h4 {
      margin-block: 0;
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
      #color(color, --primary-text-color);
    }
    .AAL001 {
      #flex(row, center, space-between);
      span {
        font-size: 14px;
        font-weight: 400;
        margin-right: 5px;
        white-space: nowrap;
        #color(color, --primary-text-color);
      }
    }
  }
  section {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    #color(background-color, --module-bg-color);
    #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
  }
  .settings {
    .file-update {
      width: 50%;
      height: 100%;
    }
  }
  .chart {
    height: 300px;
    padding: 0;
    box-shadow: unset;
    #flex(row, center, space-between);
    .item {
      box-sizing: border-box;
      padding: 5px;
      margin-right: 20px;
      border-radius: 5px;
      height: 100%;
      #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
    }
    .item:first-child {
      flex: 1;
    }
    .item:last-child {
      margin-right: 0;
      width: 300px;
      height: 100%;
      flex-wrap: wrap;
      align-content: flex-start;
      overflow: auto;
      // #flex(row, center, space-between);
      ul {
        width: 100%;
        li {
          box-sizing: border-box;
          padding: 8px 5px;
          width: 100%;
          font-size: 14px;
          border-bottom: solid 1px;
          #flex(row, center, space-between);
          #color(color, --primary-text-color);
          #color(border-bottom-color, --primary-border-color);
          span {
            text-align: left;
            flex: 1;
          }
          span:first-child {
            flex: unset;
            width: 50%;
          }
        }
        li:first-child {
          font-weight: 600;
          #color(color, --lighter-text-color);
        }
        li:nth-child(2n) {
          color: #555555;
          background-color: rgb(240, 247, 255);
        }
      }
    }
  }
  .table {
    flex: 1;
    margin-bottom: 0;
    overflow: auto;
  }
}
</style>
